<template>
  <div class="recordBox" @click="chatFunctionActive = false">
    <div class="recordContent" @scroll="scrollRecordView" ref="recordView">
      <viewer :images="showList">
        <template v-for="item in showList">
          <div
            :key="'chat_' + item.messageId"
            :id="'chat_' + item.messageId"
            :class="item.messageId == recordId ? 'chat_act' : null"
            @contextmenu.stop.prevent="chatFunctionCt($event, item)"
            @dblclick="historyItemClick(item)"
          >
            <div class="recordItem" v-if="item.type == 'text'">
              <img
                draggable="false"
                v-if="item.sendId == myInfo.id"
                v-lazy="
                  !$isNull(myInfo.head)
                    ? `${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`
                    : `static/image/home/person_${
                        myInfo.gender == 1 ? 1 : 2
                      }.png`
                "
                class="s_person_icon m-no-select"
                :onerror="defaultImg"
              />
              <img
                draggable="false"
                v-else
                v-lazy="
                  !$isNull(item.head)
                    ? `${$store.state.headPathUrl}${item.sendId || item.id}${
                        item.head
                      }.PNG`
                    : `static/image/home/person_${item.gender == 2 ? 2 : 1}.png`
                "
                class="s_person_icon"
                :onerror="defaultImg"
              />
              <div class="list_msg_value">
                <div class="info">
                  <div class="name">
                    {{ item.sendId == myInfo.id ? myInfo.name : item.name }}
                  </div>
                  <div class="time">{{ item.time | getTimeAll }}</div>
                </div>
                <div
                  v-html="$replaceKeyWords(item.value, oldsearchval, '#fa7500')"
                  class="value"
                ></div>
              </div>
            </div>
            <div v-else-if="item.type == 'image'" class="recordItem">
              <img
                draggable="false"
                v-if="item.sendId == myInfo.id"
                v-lazy="
                  !$isNull(myInfo.head)
                    ? `${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`
                    : `static/image/home/person_${
                        myInfo.gender == 1 ? 1 : 2
                      }.png`
                "
                class="s_person_icon m-no-select"
                :onerror="defaultImg"
              />
              <img
                draggable="false"
                v-else
                v-lazy="
                  !$isNull(item.head)
                    ? `${$store.state.headPathUrl}${item.sendId || item.id}${
                        item.head
                      }.PNG`
                    : `static/image/home/person_${item.gender == 2 ? 2 : 1}.png`
                "
                class="s_person_icon"
                :onerror="defaultImg"
              />
              <div class="list_msg_value">
                <div class="info">
                  <div class="name">
                    {{ item.sendId == myInfo.id ? myInfo.name : item.name }}
                  </div>
                  <div class="time">{{ item.time | getTimeAll }}</div>
                </div>
                <div class="re_i_main" @click="initView(item)">
                  <img
                    draggable="false"
                    :src="$isRelativePath(item.value)"
                    :onerror="errorImg"
                  />
                </div>
              </div>
            </div>
            <div v-else-if="item.type == 'file'" class="recordItem" @dblclick="initViewFile(item)">
              <img
                draggable="false"
                v-if="item.sendId == myInfo.id"
                v-lazy="
                  !$isNull(myInfo.head)
                    ? `${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`
                    : `static/image/home/person_${
                        myInfo.gender == 1 ? 1 : 2
                      }.png`
                "
                class="s_person_icon m-no-select"
                :onerror="defaultImg"
              />
              <img
                draggable="false"
                v-else
                v-lazy="
                  !$isNull(item.head)
                    ? `${$store.state.headPathUrl}${item.sendId || item.id}${
                        item.head
                      }.PNG`
                    : `static/image/home/person_${item.gender == 2 ? 2 : 1}.png`
                "
                class="s_person_icon"
                :onerror="defaultImg"
              />
              <div class="list_msg_value records_file_w">
                <div class="info">
                  <div class="name">
                    {{ item.sendId == myInfo.id ? myInfo.name : item.name }}
                  </div>
                  <div class="time">{{ item.time | getTimeAll }}</div>
                </div>
                <div class="re_file_box">
                  <div class="re_f_main">
                    <div class="re_f_icon">
                      <img
                        draggable="false"
                        v-lazy="$utilJs.getFileType(item.value)"
                        style="width: 36px; height: 36px"
                      />
                    </div>
                    <div class="re_f_info">
                      <div
                        v-html="
                          $replaceKeyWords(item.value, oldsearchval, '#fa7500')
                        "
                        class="value"
                      ></div>
                      <div>{{ item.duration | convertByte }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else-if="item.type == 'audio'" class="recordItem">
              <img
                draggable="false"
                v-if="item.sendId == myInfo.id"
                v-lazy="
                  !$isNull(myInfo.head)
                    ? `${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`
                    : `static/image/home/person_${
                        myInfo.gender == 1 ? 1 : 2
                      }.png`
                "
                class="s_person_icon m-no-select"
                :onerror="defaultImg"
              />
              <img
                draggable="false"
                v-else
                v-lazy="
                  !$isNull(item.head)
                    ? `${$store.state.headPathUrl}${item.sendId || item.id}${
                        item.head
                      }.PNG`
                    : `static/image/home/person_${item.gender == 2 ? 2 : 1}.png`
                "
                class="s_person_icon"
                :onerror="defaultImg"
              />
              <div class="list_msg_value">
                <div class="info">
                  <div class="name">
                    {{ item.sendId == myInfo.id ? myInfo.name : item.name }}
                  </div>
                  <div class="time">{{ item.time | getTimeAll }}</div>
                </div>
                <div class="audio_i_w" @click="toPlayAudio(item)">
                  <img
                    draggable="false"
                    src="static/image/home/ease_chatfrom_voice_playing.png"
                    :ref="`audio_image_${item.messageId}`"
                  />
                  <audio
                    :src="$isRelativePath(item.isDownLoad)"
                    :ref="item.messageId"
                    @ended="init_auto_play"
                  ></audio>
                  <div class="audio_dur">
                    <p style="color: #333">语音</p>
                    <p style="color: #999">{{ item.duration }}秒</p>
                  </div>
                </div>
              </div>
            </div>
            <div v-else-if="item.type == 'video'" class="recordItem">
              <img
                draggable="false"
                v-if="item.sendId == myInfo.id"
                v-lazy="
                  !$isNull(myInfo.head)
                    ? `${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`
                    : `static/image/home/person_${
                        myInfo.gender == 1 ? 1 : 2
                      }.png`
                "
                class="s_person_icon m-no-select"
                :onerror="defaultImg"
              />
              <img
                draggable="false"
                v-else
                v-lazy="
                  !$isNull(item.head)
                    ? `${$store.state.headPathUrl}${item.sendId || item.id}${
                        item.head
                      }.PNG`
                    : `static/image/home/person_${item.gender == 2 ? 2 : 1}.png`
                "
                class="s_person_icon"
                :onerror="defaultImg"
              />
              <div class="list_msg_value">
                <div class="info">
                  <div class="name">
                    {{ item.sendId == myInfo.id ? myInfo.name : item.name }}
                  </div>
                  <div class="time">{{ item.time | getTimeAll }}</div>
                </div>
                <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions[item.messageId]"
                ></video-player>
              </div>
            </div>
          </div>
        </template>
      </viewer>
    </div>
    <div
      class="chat_function"
      @click.stop.prevent=""
      v-if="chatFunctionActive"
      :style="{ top: chatMenuTop + 'px', left: chatMenuLeft + 'px' }"
      @mouseleave="showToForwardingClose()"
    >
      <li
        class="chat_function_item"
        @click.stop.prevent="savePicture(currentChatItem)"
        v-if="currentChatItem.type == 'image'"
      >
        下载
      </li>
      <li
        class="main_chat_function"
        v-if="
          currentChatItem.type == 'text' ||
          currentChatItem.type == 'image' ||
          (currentChatItem.type == 'file' &&
            currentChatItem.isDownLoad != 404 &&
            currentChatItem.isDownLoad != 0)
        "
        @click.stop.prevent="toCopyChat(currentChatItem)"
      >
        复制
      </li>
      <div v-if="currentChatItem.isDownLoad != 404">
        <li 
          class='chat_function_item' 
          v-if="currentChatItem.type == 'file'" 
          @mouseover="showToForwarding()"
        >转发
          <b class="expand">></b>
          <ul class="list_expand" v-show="isShowForward" @mouseleave="showToForwardingClose()">
            <li @click.stop.prevent='toForwarding(currentChatItem)'>原文件</li>
            <li 
              v-if="currentChatItem.isDownLoad != '0' &&
              currentChatItem.isDownLoad != 'loading' &&
              currentChatItem.isDownLoad != 'Message-roaming'" 
              @click.stop.prevent='toForwardingLocal(currentChatItem)'
            >本地文件
            </li>
          </ul>
        </li>
        <li 
          class='chat_function_item' 
          v-if="currentChatItem.type != 'file' &&
          currentChatItem.type != 'announcement' &&
          currentChatItem.type != 'screen'" 
          @click.stop.prevent='toForwarding(currentChatItem)'
        >转发
        </li>
      </div>
      <li
        class="chat_function_item"
        v-if="
          currentChatItem.type != 'GPS' &&
          currentChatItem.isDownLoad != 404 &&
          currentChatItem.type != 'announcement' &&
          currentChatItem.type != 'screen'
        "
        @click.stop.prevent="toCollection(currentChatItem)"
      >
        收藏
      </li>
      <li
        class="chat_function_item"
        v-if="currentChatItem.type == 'text'"
        @click.stop.prevent="toBacklog(currentChatItem)"
      >
        待办
      </li>
      <div v-if="currentChatItem.type == 'file'">
        <li
          class="chat_function_item"
          @click.stop.prevent="toDownFile(currentChatItem)"
          v-if="
            (currentChatItem.isDownLoad == '0' ||
              currentChatItem.isDownLoad == 'Message-roaming') &&
            currentChatItem.upload != 1
          "
        >
          下载
        </li>
        <li
          class="chat_function_item"
          @click.stop.prevent="toPreviewFile(currentChatItem)"
          v-if="
            currentChatItem.isDownLoad != '0' &&
            currentChatItem.isDownLoad != 'loading' &&
            currentChatItem.isDownLoad != 'Message-roaming'
          "
        >
          打开
        </li>
        <li
          class="chat_function_item"
          @click.stop.prevent="openPath(currentChatItem)"
          v-if="
            currentChatItem.isDownLoad != '0' &&
            currentChatItem.isDownLoad != 'loading' &&
            currentChatItem.isDownLoad != 'Message-roaming'
          "
        >
          目录
        </li>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { addCollect } from "@/api/homeChatMain";
export default {
  props: {
    recordId: {
      type: String,
      default: "",
    },
    recordList: {
      type: Array,
      default: [],
    },
    toInfo: {
      type: Object,
      default: {
        id: "",
        name: "",
        isGroup: false,
      },
    },
    playerOptions: {
      type: Object,
      default: {},
    },
    staticArray: {
      type: Object,
      default: [],
    },
  },
  data() {
    return {
      defaultImg:
        'this.src="' + require("../../../static/image/home/person_1.png") + '"',
      audio_play: null, //语音播放的refs
      audio_item: null, //语音播放的messageId
      audio_time: null, //语音播放时图片更改定时器
      pagenum: 1, //zk125新增，当前第几页
      pagesize: 40, //zk125每页多少条
      showList: [], //zk125新增，分页后的list
      canScroll: true, //是否可以上下翻页
      chatMenuTop: 0,
      chatMenuLeft: 0,
      currentChatItem: {},
      currentTextCopy: "",
      isShowForward: false,
      chatFunctionActive: false,
      errorImg: 'this.src="static/image/home/errDefault.png"',
    };
  },

  computed: {
    ...mapState(["myInfo"]),
    sqlTable() {
      return {
        messageList: `message_list_${this.myInfo.id}`, //群聊消息表
        privateList: `private_list_${this.myInfo.id}`, //单聊消息表
      };
    },
    oldsearchval() {
      return this.$store.state.oldsearchval;
    },
  },

  methods: {
    // 2022/7/6 新增综合搜索聊天记录文件打开本地目录功能
    openPath(item){
      let path = item.isDownLoad == "self" ? item.filePath : item.isDownLoad;
      if (this.$store.state.user_hot_key[5]) {
        let res = this.$shell("OpenPathByUrl", [
          this.$store.state.user_hot_key[5],
          path ? this.$isRelativePath(path).replace(/\//g, "\\") : "" || ""
        ]);
        // let res = this.$shell("OpenPathByUrl",[this.$store.state.user_hot_key[5]]);
      } else {
        this.$Message.warning("请先设置默认目录");
      }
    },
    toBacklog(item) {
      this.$emit('toBacklog', item);
    },
    //index --->1为搜索,其他不需要参数
    operationalDatabase(statements, index) {
      let to = JSON.stringify({
        Sqlstr: statements,
      });
      return arguments[1]
        ? JSON.parse(this.$shellSQL(to, index))
        : JSON.parse(this.$shellSQL(to));
    },
    toCollection(item) {
      this.chatFunctionActive = false;
      let _item = JSON.parse(JSON.stringify(item));
      let collect = null;
      // 文本格式
      if (item.type == "text") {
        let isTrue = this.toInfo.isGroup == "1";
        let str;
        str = `${
          isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
        } WHERE messageId='${item.messageId}'`;
        let res = this.operationalDatabase(
          `SELECT * FROM  ${str} ORDER BY time DESC;`,
          1
        );
        if (res.list.length > 0) {
          _item.value = res.list[0].value;
          _item.head = res.list[0].head;
        }
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: _item.type,
            // 修改前
            // value:_item
            // 字符段格式修改
            // 修改后(两端能显示，不能删除不能添加)
            value: {
              content: _item.value,
              time: _item.time,
              receiveName: _item.receiveName,
              sendName: _item.sendName,
              messageId: _item.messageId,
              receiveId: _item.receiveId,
              sendId: _item.sendId,
              isRead: _item.isRead,
              isDownLoad: _item.isDownLoad,
              DownLoadId: _item.DownLoadId,
              fileSize: _item.duration,
              duration: _item.duration,
              name: _item.name,
              fileName: _item.DownLoadId,
            },
          },
        ];
      }
      // 图片格式
      if (item.type == "image") {
        let isTrue = this.toInfo.isGroup == "1";
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: _item.type,
            // 修改前
            // value:_item
            // 字符段格式修改
            // 修改后(两端能显示，不能删除不能添加)
            value: {
              content: _item.DownLoadId,
              time: _item.time,
              receiveName: _item.receiveName,
              sendName: _item.sendName,
              messageId: _item.messageId,
              receiveId: _item.receiveId,
              sendId: _item.sendId,
              isDownLoad: _item.isDownLoad,
              DownLoadId: _item.DownLoadId,
              duration: _item.duration,
              fontSize: _item.fontSize,
              name: _item.name,
              fileName: _item.value,
            },
          },
        ];
      }
      // 文件格式
      if (item.type == "file") {
        let isTrue = this.toInfo.isGroup == "1";
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: "file",
            // 修改前
            // value:_item
            // 字符段格式修改
            // 修改后(两端能显示，不能删除不能添加)
            value: {
              content: _item.DownLoadId,
              time: _item.time,
              receiveName: _item.receiveName,
              sendName: _item.sendName,
              messageId: _item.messageId,
              receiveId: _item.receiveId,
              sendId: _item.sendId,
              isDownLoad: _item.isDownLoad,
              DownLoadId: _item.DownLoadId,
              fileSize: _item.duration,
              duration: _item.duration,
              name: _item.name,
              fileName: _item.value,
            },
          },
        ];
      }
      // 音频格式
      if (item.type == "audio") {
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: _item.type,
            // 修改前
            // value:_item
            // 字符段格式修改
            // 修改后(两端能显示，不能删除不能添加)
            value: {
              content: _item.value,
              time: _item.time,
              receiveName: _item.receiveName,
              sendName: _item.sendName,
              messageId: _item.messageId,
              receiveId: _item.receiveId,
              sendId: _item.sendId,
              isRead: _item.isRead,
              isDownLoad: _item.isDownLoad,
              DownLoadId: _item.DownLoadId,
              fileSize: _item.duration,
              duration: _item.duration,
              name: _item.name,
              fileName: _item.value,
            },
          },
        ];
      }
      // 文章格式
      if (item.type == "article") {
        let msg = JSON.parse(_item.value) || {};
        collect = [
          {
            from_name: this.toInfo.name,
            type: this.toInfo.isGroup == "1" ? 1 : 0, //文件来源类型 0:单人文件 1:群文件
            message_id: _item.messageId, //消息id
            user_id: this.myInfo.id,
            file_id: _item.DownLoadId,
            from_id: this.toInfo.id,
            file_type: _item.type,
            value: {
              title: msg.title,
              url: msg.url,
              describe: msg.describe,
              picture: msg.imgUrl || "",
            },
          },
        ];
      }
      // 添加收藏
      if (collect) {
        console.log(JSON.stringify(collect));

        addCollect({ collect: JSON.stringify(collect) })
          .then((res) => {
            if (res.result == 200) {
              this.$emit("getCollect");
              this.$Message.success(res.msg);
            } else {
              this.$Message.success(res.msg);
            }
          })
          .catch((error) => {
            this.$Message.success("服务器出错,稍后再试26");
          });
      }
    },
    scrollRecordView() {
      //zk125新增
      let a =
        this.$refs.recordView.scrollTop +
        this.$refs.recordView.clientHeight -
        100;
      let b = this.$refs.recordView.scrollHeight;
      if (this.canScroll) {
        if (b - a <= 100) {
          this.pagenum++;
          this.canScroll && this.setShowList(1);
          this.canScroll = false;
        } else if (this.$refs.recordView.scrollTop < 10) {
          this.pagenum--;
          this.canScroll && this.setShowList(-1);
          this.canScroll = false;
        }
      } else {
        this.canScroll = true;
      }
    },
    setShowList(flag) {
      //zk125新增，设置展示的list
      let size = this.pagesize;
      let num = this.pagenum;
      let maxnum = Math.ceil(this.recordList.length / size);
      let _this = this;
      let arr = this.showList;
      let arr1 = [];
      switch (flag) {
        case 0:
          let i = this.recordList.filter((item, index) => {
            if (item.messageId == _this.recordId) {
              num = Math.floor(index / size) + 1;
              _this.pagenum = num;
              console.log("设置展示的list", index, num);
              return item;
            }
          });
          arr = this.recordList.filter((item, index) => {
            return index < size * num && index >= size * (num - 1);
          });
          console.log("设置展示的list完成");
          this.showList = [...arr];
          break;
        case -1:
          //上下翻页
          console.log(num, maxnum);
          if (num > 0 && num <= maxnum) {
            _this.pagenum = num;
            arr1 = this.recordList.filter((item, index) => {
              return index < size * num && index >= size * (num - 1);
            });
          }
          this.showList = [...arr1, ...arr];
          this.$nextTick(() => {
            let str = `#chat_${arr1[arr1.length - 1].messageId}`;
            document.querySelector(str).scrollIntoView({ block: "start" }); //不会白屏
          });
          break;
        case 1:
          console.log(num, maxnum);
          if (num > 0 && num <= maxnum) {
            _this.pagenum = num;
            arr1 = this.recordList.filter((item, index) => {
              return index < size * num && index >= size * (num - 1);
            });
          }
          this.showList = [...arr, ...arr1];
          break;
      }
    },
    getRecord() {
      let _this = this;
      this.setShowList(0);
      this.$nextTick(() => {
        console.log("设置展示的list的位置");
        let str = `#chat_${_this.recordId}`;
        // let h = document.getElementById(`chat_${_this.recordId}`).offsetTop - 76;
        // $('.recordContent').animate({scrollTop: h}, 600)
        // window.location.hash = str; //按回退键会白屏
        document.querySelector(str).scrollIntoView({ block: "start" }); //不会白屏
      });
    },
    init_auto_play() {
      this.$refs[
        `audio_image_${this.audio_item.messageId}`
      ][0].src = `static/image/home/ease_chat${
        this.audio_item.id == this.myInfo.id ? "to" : "from"
      }_voice_playing.png`;
      clearInterval(this.audio_time);
      this.audio_play = this.audio_item = this.audio_time = null;
    },
    toPlayAudio(item) {
      let id = this.audio_item ? this.audio_item.messageId : "";
      let src = `static/image/home/ease_chat${
        this.audio_item && this.audio_item.id == this.myInfo.id ? "to" : "from"
      }_voice_playing.png`;
      clearInterval(this.audio_time);
      this.audio_time = null;
      this.audio_item = item;
      if (this.audio_play) {
        this.$refs[`audio_image_${id}`][0].src = src;
        this.audio_play.pause();
        if (this.audio_play != this.$refs[item.messageId][0]) {
          this.audio_play.currentTime = 0;
          this.audio_play = this.$refs[item.messageId][0];
          console.log(this.audio_play, "播放节点2");
          this.audio_play.play();
          this.audio_timer_inter();
        } else {
          this.audio_play = null;
        }
      } else {
        this.audio_play = this.$refs[item.messageId][0];
        console.log(this.audio_play, "播放节点1");
        this.audio_play.play();
        this.audio_timer_inter();
      }
    },
    audio_timer_inter() {
      let i = 1;
      this.$refs[
        `audio_image_${this.audio_item.messageId}`
      ][0].src = `static/image/home/ease_chat${
        this.audio_item.id == this.myInfo.id ? "to" : "from"
      }_voice_playing_f${i}.png`;
      this.audio_time = setInterval(() => {
        i++;
        if (i == 4) i = 1;
        this.$refs[
          `audio_image_${this.audio_item.messageId}`
        ][0].src = `static/image/home/ease_chat${
          this.audio_item.id == this.myInfo.id ? "to" : "from"
        }_voice_playing_f${i}.png`;
        this.$forceUpdate();
      }, 330);
    },
    //获取坐标
    getItemCoordinate(e) {
      this.chatMenuTop = e.clientY + 2 || 0;
      this.chatMenuLeft = e.clientX + 10 || 0;
    },
    // 会话功能
    chatFunctionCt($event, item) {
      this.currentChatItem = item;
      this.currentTextCopy = window.getSelection().toString();
      this.chatFunctionActive = true;
      this.getItemCoordinate($event);
    },
    showToForwarding() {
      this.isShowForward = true;
    },
    showToForwardingClose() {
      this.isShowForward = false;
    },
    toForwarding(temp) {
      this.chatFunctionActive = false;
      this.$emit("toForwarding", temp);
    },
    //复制功能
    toCopyChat(item) {
      console.log(item, "点击复制的item");
      this.chatFunctionActive = false;
      if (item.type == "text") {
        let isTrue = this.toInfo.isGroup == "1";
        let str;
        str = `${
          isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
        } WHERE messageId='${item.messageId}'`;
        let res = this.$operationalDatabase(
          `SELECT * FROM  ${str} ORDER BY time DESC;`,
          1
        );
        if (res.list.length > 0) {
          let value = this.$utilJs.htmlDecodeByRegExp(
            this.$utilJs.returnEncodeBr(res.list[0].value)
          );
          if (this.currentTextCopy) {
            this.$store.state.copyValue = this.currentTextCopy;
          } else {
            this.$store.state.copyValue = value;
          }
          console.log(this.$store.state.copyValue, "存入仓库的内容");
        }
      } else if (item.type == "image" || item.type == "file") {
        //新增会话复制图片文件功能
        // if (!item.filePath && item.isDownLoad == 0) {//zk注释，复制选项的显隐已做处理
        //   this.$Message.warning("请先下载内容");
        //   return;
        // };
        let isImg = item.type == "image";
        let type = isImg ? "Bitmap" : "FileDrop";
        let data = isImg ? item.value : item.filePath || item.isDownLoad;
        let msg = this.$shell("SetClipboardData", [
          type,
          this.$isRelativePath(data),
        ]);
        this.$store.state.copyValue = null; //zk新增，复制文件和图片时，copyvalue为空
      }
      // 到粘贴板
      this.$copyText(this.$store.state.copyValue).then(
        (e) => {
          // success
          console.log(e);
          this.$Message.warning("内容已复制到粘贴板");
        },
        (e) => {
          // faile
          console.log(e);
        }
      );
    },
    initView(item) {
      let itemList = [];
      this.showList.forEach((i) => {
        if (i.type == "image") {
          itemList.push(i);
        }
      });
      console.log("图片列表", itemList);
      let index = itemList.indexOf(item);
      let tempPics = [];
      let obj = {};
      itemList.forEach((val) => {
        obj = {};
        obj.UserID = this.myInfo.id;
        obj.ImageID = val.DownLoadId;
        obj.Suffix = val.value.toLowerCase().split(".").splice(-1)[0];
        obj.ThumbnailPath = this.$isRelativePath(val.value);
        obj.OriginalImage = val.smallValue
          ? this.$isRelativePath(val.smallValue)
          : val.smallValue;
        tempPics.push(obj);
      });
      tempPics = JSON.stringify(tempPics);
      let info = this.$shell("OpenWatchPicFormczs", [tempPics, index]);
      console.log(info, "图片预览接口返回");
    },
    savePicture(item) {
      //zk修改，下载原图
      this.chatFunctionActive = false;
      let tableName =
        this.toInfo.isGroup == "1"
          ? this.sqlTable.messageList
          : this.sqlTable.privateList;
      this.$savePicture(item, this.myInfo, tableName);
    },
    toDownFile(temp) {
      this.$emit("toDownFile", temp);
    },
    //文件预览
    toPreviewFile(item) {
      let rep = this.$shell("OpenFlieByUrl", [
        this.$isRelativePath(item.isDownLoad),
      ]);
      console.log(item, "文件预览", rep);
      rep = JSON.parse(rep);
      if (rep.return_code == "FALSE") {
        this.$Message.info("系统找不到指定的文件,请重新下载");
        this.$set(item, "isDownLoad", 0);
        return;
      }
    },
    initViewFile(item){
      if((item.isDownLoad == '0' ||item.isDownLoad == 'Message-roaming') &&item.upload != 1){
        this.$Message.info("开始下载");
        this.toDownFile(item)
      }else if(
        item.isDownLoad != '0' &&
        item.isDownLoad != 'loading' &&
        item.isDownLoad != 'Message-roaming'        
      ){
        this.toPreviewFile(item)
      }
    },
    historyItemClick(item){//zk新增，点击历史消息，聊天框跳到该历史消息处
      console.log(item,"当前点击的哪条历史消息")
      this.$bus.$emit("goChatMsg", this.staticArray,item.messageId)
    },
  },
  watch: {
    recordList: {
      handler(newVal) {
        this.getRecord();
      },
      deep: true,
      immediate: true,
    },
  },
  filters: {
    Interception(value) {
      let index = value.lastIndexOf("/");
      let str = value.substring(index + 1, value.length);
      return str;
    },
    convertByte(byteCount) {
      var count = parseFloat(byteCount),
        unitArr = ["b", "Kb", "Mb", "Gb", "Tb"],
        index = 0;
      if (!count) return 0;
      for (let i = 0; i < 5; i++) {
        if (count >= 1024) {
          count = count / 1024;
          index++;
        } else {
          return index > 0
            ? count.toFixed(2) + unitArr[index]
            : count + unitArr[index];
        }
        if (index == 4) {
          return count.toFixed(2) + unitArr[index];
        }
      }
    },
  },
  mounted() {
    //this.getRecord()
  },
  created() {},
};
</script>
<style lang="less" scoped>
.recordBox {
  width: 100%;
  height: 100%;

  background-color: #fff;
  // box-sizing: border-box;
  z-index: 2;
  .recordTitle {
    width: 100%;
    height: 37px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tochat {
      display: flex;
      cursor: pointer;
      font-size: 14px;
      display: inline-block;
      margin-right: 20px;
      line-height: 20px;
      img {
        vertical-align: middle;
      }
    }
    .close {
      width: 10px;
      height: 10px;
      line-height: 10px;
      margin-right: 20px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      margin-left: 20px;
    }
  }
  .recordContent {
    // width: 100%;
    height: calc(100% - 40px);
    overflow: scroll;
    padding: 7px 0;
    .chat_act {
      background-color: #fff4eb;
      border-top: #ffbb7f solid 1px;
      border-bottom: #ffbb7f solid 1px;
    }
    .recordItem {
      // width:100%;
      padding: 5px 20px;
      display: flex;
      cursor: pointer;
      .s_person_icon {
        width: 24px;
        height: 24px;
        margin-right: 1em;
      }
      .list_msg_value {
        .info {
          .name {
            font-size: 12px;
            color: #666666;
          }
          .time {
            font-size: 12px;
            color: #999;
          }
        }
        .value {
          display: block;
          font-size: 14px;
          color: #333333;
          text-align: left;
          word-break: break-all;
        }
        .audio_i_w {
          width: 160px;
          height: 52px;
          border: 1px solid #e5e5e5;
          justify-content: flex-start;
          align-items: center;
          & > img {
            margin: 0 10px 0 6px;
          }
        }
        .re_i_main {
          img {
            max-height: 90px;
            max-width: 90px;
          }
        }
      }
      .records_file_w {
        .re_file_box {
          border: 1px solid #e5e5e5;
          padding: 8px 10px;
          margin-top: 5px;
          height: 60px;
          .re_f_main {
            display: flex;
            align-items: center;
            .re_f_info {
              font-size: 14px;
              color: #333;
              text-align: left;
              line-height: 22px;
              margin-left: 12px;
              & > div:last-child {
                font-size: 12px;
                color: #999;
              }
            }
          }
        }
      }
    }
    .recordItem:hover {
      background-color: #ebedf0;
    }
  }
}
</style>